<template>
  <view>
    <view class="text-padding-wrap uni-flex uni-row">
      <view class="home">我的小家</view>
      <view class="power right-flex uni-row"
        ><view>50%</view><view class="iconfont icon-dianliang-di"></view
      ></view>
    </view>
    <view class="cicle-padding-wrap"
      ><view class="cicle" @click="open()"
        ><view class="close"><view :class="status"></view></view></view
    ></view>
    <view class="do-padding-wrap uni-flex uni-row">
      <view class="do" @tap="toRecord(t)"
        ><view class="iconfont icon-caozuojilu"> </view
        ><view class="word">操作记录</view></view
      >
      <view
        ><view class="iconfont icon-shezhi2"> </view
        ><view class="word">设置</view></view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: "iconfont icon-suozi",
      t: [],
    };
  },
  methods: {
    toRecord(leadobj) {
      uni.navigateTo({
        url: "./record?leadobj=" + encodeURIComponent(JSON.stringify(leadobj)),
      });
    },
    open() {
      var v = new Date().Format("yyyy-MM-dd hh:mm:ss");
      this.t.push(v);
      function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      }

      this.status = "iconfont icon-suo2";
      uni.showToast({
        title: "已开锁",
        duration: 1000,
        width: "20px",
        height: "20px",
      });
      sleep(3000).then(() => {
        this.status = "iconfont icon-suozi";
      });
    },
  },
};
</script>

<style>
page {
  background-color: #ffffff;
}
.text-padding-wrap {
  padding: 30rpx 0;
}
.uni-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-bottom: 10px; */
}
.right-flex {
  display: flex;
  flex-direction: row;
  justify-content: right;
}

.home {
  margin-left: 162px;
  color: #414141;
  font-size: 14px;
}
.left-flex {
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.power {
  margin-right: 10px;
  color: #a8a8a8;
  font-size: 12px;
}
.icon-dianliang-di {
  margin-left: 3px;
}
.cicle-padding-wrap {
  padding: 10px 30px 60px 30px;
  border-bottom: 1px solid #f0f0f0;
}
.close {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0px 0px 15px #fcfcfc;
  background-color: #fff;
}
.cicle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #d4f4fe;
  align-content: center;
  margin: 0 auto;
  padding: 10px;
}
.icon-suozi,
.icon-suo2 {
  text-align: center;
  line-height: 120px;
}
.uni-row {
  flex-direction: row;
}
.do-padding-wrap {
  padding: 50rpx;
}
.do {
  margin-right: 10px;
}
.icon-shezhi2 {
  text-align: center;
  margin-bottom: 5px;
}
.word {
  font-size: 14px;
}

.icon-caozuojilu {
  text-align: center;
  margin-bottom: 5px;
  color: #51c4d3;
  font-size: 24px;
}
</style>